Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@cloudflare/style-provider

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudflare/style-provider

Cloudflare Style Provider

1.4.9
npm

Version published: 2 years ago

Maintainers: 30

Created: 7 years ago

Source

cf-style-provider

Cloudflare Style Provider

In order to support cf-ui (fela based components) in your project, you need to wrap your app by our StyleProvider. Check out the main README.md to see it in use. This package also provides testing utilities. Our fela setup consists of many plugins, enhancers and themes. To ensure that everything has the same context and works properly, you should never use packages as fela, fela-dom, react-fela or cf-style-const directly. Always use cf-style-provider.

Installation

$ npm install cf-style-provider

StyleProvider

import { StyleProvider } from 'cf-style-provider';

render(
  <StyleProvider
    dev={false}
    renderer={undefined}
    rehydrate={false}
  >
    <YourApp />
  </StyleProvider>
);

props and default values

dev: false, in dev mode it applies more Fela plugins (validator, beautifier, monolithic)
renderer: undefined, StyleProvider creates fela renderer internally but sometimes you might want to inject your own instance if you need to expose other renderer's APIs (e.g. for testing) or to ensure that there is only single instance of fela renderer in your application
rehydrate: value comes from context This prop is used for server side rehydration of Fela styles. This prop should be turned off when rendering Fela components outside of root rendererer hierarchy to avoid class name collisions. If unsure, use rehydrate={false}.

Dev mode produces developer friendly output (CSS is formatted), validates all rules and merges atomic classNames into one. Fela automatically creates <style> nodes in <head> node and injects the styles.

createRenderer

Or you can just get Fela's renderer (useful for server-side rendering)

import ReactDOMServer from 'react-dom/server';
import { RendererProvider } from 'react-fela';
import { createRenderer } from 'cf-style-provider';

// default values
const renderer = createRenderer({
  dev: false, // in dev mode it applies more Fela plugins (validator, ...)
});

const body = ReactDOMServer.renderToString(
  <Provider renderer={renderer}>
    <Main />
  </Provider>
);

renderer.renderToString(); // returns CSS as a string

felaTestContext

For testing. HOC that passes fela renderer and base theme into the context. Handy for testing with enzyme. However, if your goal is to use Enzyme with Fela, You should probably use felaShallow or felaMount instead, they provide a better abstraction .

import { mount } from 'enzyme';
import { felaTestContext } from 'cf-style-provider';

test('should call onPageChange when clicking another page', () => {
  const onPageChange = createStub();

  const wrapper = mount(
    felaTestContext(
      <PaginationBuilder
        onPageChange={onPageChange}
        totalCount={20}
        page={1}
        perPage={1}
      />
    )
  );

  const items = wrapper.find('li');
  items.at(2).find('a').simulate('click');
  expect(onPageChange.called).toBeTruthy();
});

felaSnapshot

For testing. Internally felaTestContext. It deep renders the component and returns snapshots of DOM and styles as a object with properties component and styles. However, if your goal is to use Enzyme with Fela, You should probably use felaShallow or felaMount instead, they provide a better abstraction.

Use it like this:

import React from 'react';
import { Form } from '../src/index';
import { felaSnapshot } from 'cf-style-provider';

test('should render horizontal layout', () => {
  const snapshot = felaSnapshot(
    <Form layout="horizontal" onSubmit={() => console.log('submit')}>
      Form
    </Form>
  );
  expect(snapshot.component).toMatchSnapshot();
  expect(snapshot.styles).toMatchSnapshot();
});

Used Fela plugins

We use multiple fela plugins that extend typical CSS-in-JS syntax. Check them out for more details:

named-media-query

We have a set of configured media queries. Please, use them!

mobile: @media (min-width: 13.6em)
mobileWide: @media (min-width: 30.4em)
tablet: @media (min-width: 47.2em)
desktop: @media (min-width: 64em)
desktopLarge: @media (min-width: 97.6em)

Input:

const Column = createComponent(() => ({
  color: 'black',
  desktop: {
    color: 'white'
  }
}))

Output:

<style data-fela-type="RULE" type="text/css">
  .a {
    color: black
  }
</style>

<style data-fela-type="RULE" type="text/css" media="(min-width: 64em)">
  .b {
    color: white
  }
</style>

<div class="a b"></div>

FAQs

What is @cloudflare/style-provider?

Is @cloudflare/style-provider well maintained?

Package last updated on 27 Jul 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install